<template>
  <header
    class="mint-header myhead"
    ref="h">
    <div class="mint-header-button is-left">
      <router-link to="/home"><span class="ifc">&#xeb9f;</span></router-link>
    </div>

    <input type="text" class="inp"  style="width:150px;background-color:#fff;  padding-left:10px;" placeholder="JD">
    <div class="mint-header-button is-right">
      <router-link to="/login" v-if="!islogin">{{login}}</router-link>

       <router-link to="/mine" v-if="islogin" style="color:#000; font-weight:600;">{{msg.username | nameslice}}</router-link>
      <a  v-if="islogin" style="color:#000; font-weight:600;" @click="headback">退出</a>
    </div>
  </header>
</template>

<script>
import {
  mapState,
  mapGetters,
  mapMutations
  // mapActions
} from 'vuex'
import 'mint-ui/lib/style.css'
export default {
  filters: {
    nameslice (data) {
      return data.slice(0, 5)
    }
  },
  name: 'mt-header',
  methods: {
    ...mapMutations([
      'headback'
    ])
  },
  computed: {
    ...mapState([
      'msg'
    ]),
    ...mapGetters([
      'carlength',
      'islogin'
    ])
  },

  data () {
    // console.log(val)
    return {
      old: null,
      login: '登录',
      mine: '个人中心',
      flag: false
      // val: string

    }
  },
  watch: {
    islogin () {
      console.log(this.$router)
      if (this.islogin) {
        let name = this.msg.name
        this.mine = name
        this.flag = true
      }
    },
    $route () {
      if (this.$route.name === 'category' || this.$route.name === 'detail' || this.$route.name === 'comment') {
        this.$refs.h.style.backgroundColor = 'red'
      }
    }
  }

}
window.onscroll = function () {
  // console.log(123)
  if (document.querySelector('.myhead')) {
    let d = document.documentElement.scrollTop
    if (d === 0) {
      document.querySelector('.myhead').style.backgroundColor = 'transparent'
    } else {
      document.querySelector('.myhead').style.backgroundColor = 'red'
    }
  }
}

</script>

<style lang="less" scoped>
    header{
      width: 100%
    }
   .inp{
      border-radius: 4vw;
      // padding-left: 10vw;
      outline:none;
      outline:medium;
      border:none;
      height: 7vw;
    }
    .JD{
      color: red;
      position: fixed;
      left: 27vw;
      top:3.6vw;
      border-right: 1px solid #ccc;
      padding-right:1vw;
    }

    .ifc{
      font-family: 'iconfont';
    }
    .myhead{
      position: fixed !important;
      top:0;
      left:0;
      right:0;
      z-index: 99999;
      background-color: transparent;
    }
    a{
      text-decoration: none;
    }
</style>
